<template>
    <div class="store">
      <h2>去逛逛</h2>
      <div class="product-list">
        <div v-for="product in products" :key="product.id" class="product-card">
          <h4>{{ product.name }}</h4>
          <p class="description">{{ product.description }}</p>
          <p class="price">价格: ￥{{ product.price.toFixed(2) }}</p>
          <button class="add-to-cart">加入购物车</button>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  const products = ref([
    {
      id: 1,
      name: '商品 1',
      description: '这是商品 1 的描述。',
      price: 99.99,
    },
    {
      id: 2,
      name: '商品 2',
      description: '这是商品 2 的描述。',
      price: 149.99,
    },
    {
      id: 3,
      name: '商品 3',
      description: '这是商品 3 的描述。',
      price: 79.99,
    },
    {
      id: 4,
      name: '商品 4',
      description: '这是商品 4 的描述。',
      price: 199.99,
    },
    {
      id: 5,
      name: '商品 5',
      description: '这是商品 5 的描述。',
      price: 89.99,
    },
  ]);
  </script>
  
  <style scoped>
  .store {
    width: 1420px ;/* 限制组件宽度 */
    margin: 0 auto; /* 居中对齐 */
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }
  
  h2 {
    text-align: center;
    font-family: 'Arial', sans-serif;
    color: #333;
    margin-bottom: 20px;
  }
  
  .product-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 自适应网格布局 */
    gap: 20px; /* 卡片间距 */
  }
  
  .product-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    padding: 15px;
    text-align: center;
    transition: transform 0.2s;
  }
  
  .product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  }
  
  .description {
    font-size: 0.9em;
    color: #666;
    margin: 10px 0;
  }
  
  .price {
    font-size: 1.2em;
    color: #333;
    margin: 10px 0;
  }
  
  .add-to-cart {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    background-color: #5cb85c;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  
  .add-to-cart:hover {
    background-color: #4cae4c;
  }
  </style>